<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <title>条码生成 - {$site.name}</title>
        <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
          <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
          <script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.js"></script>
        <![endif]-->
    </head>
    <body>
        <div class="container">
            <h2>条码生成</h2>
            <hr>
            <div class="well">
                <form action="" method="post">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="control-label">文本内容</label>
                                <input type="text" name="text" class="form-control" placeholder="" value="1234567890">
                            </div>
                            <div class="form-group">
                                <label class="control-label">条码类型</label>
                                <select name="type" class="form-control">
                                    <option value="C128">C128</option>
                                    <option value="C128A">C128A</option>
                                    <option value="C128B">C128B</option>
                                    <option value="C128C">C128C</option>
                                    <option value="C39">C39</option>
                                    <option value="C39+">C39+</option>
                                    <option value="C39E">C39E</option>
                                    <option value="C39E+">C39E+</option>
                                    <option value="S25">S25</option>
                                    <option value="I25">I25</option>
                                    <option value="I25+">I25+</option>
                                    <option value="EAN2">EAN2</option>
                                    <option value="EAN5">EAN5</option>
                                    <option value="EAN8">EAN8</option>
                                    <option value="EAN13">EAN13</option>
                                    <option value="UPCA">UPCA</option>
                                    <option value="UPCE">UPCE</option>
                                    <option value="MSI">MSI</option>
                                    <option value="POSTNET">POSTNET</option>
                                    <option value="PLANET">PLANET</option>
                                    <option value="RMS4CC">RMS4CC</option>
                                    <option value="KIX">KIX</option>
                                    <option value="IMB">IMB</option>
                                    <option value="CODABAR">CODABAR</option>
                                    <option value="CODE11">CODE11</option>
                                    <option value="PHARMA">PHARMA</option>
                                    <option value="PHARMA2T">PHARMA2T</option>
                                </select>
                            </div>

                            <div class="form-group">
                                <input type="submit" class="btn btn-info" />
                                <input type="reset" class="btn btn-default" />
                            </div>
                        </div>

                        <div class="col-md-2">
                            <div class="form-group">
                                <div class="form-group">
                                    <label class="control-label">前景色</label>
                                    <input type="text" name="foreground" placeholder="" class="form-control" value="#000000">
                                </div>
                                <div class="form-group">
                                    <label class="control-label">间距</label>
                                    <input type="number" name="width" placeholder="" class="form-control" value="2">
                                </div>
                                <div class="form-group">
                                    <label class="control-label">高度</label>
                                    <input type="number" name="height" placeholder="" class="form-control" value="30">
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <input type="text" class="form-control" id='barcodeurl' />
            <img src="" alt="" id='barcodeimg' style="margin-top:15px;"/>
        </div>
        <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $("form").submit(function () {
                    $("#barcodeimg").prop("src", "{:addon_url('barcode/index/build',[],false)}?" + $(this).serialize());
                    $("#barcodeurl").val("{:addon_url('barcode/index/build',[],false,true)}?" + $(this).serialize());
                    return false;
                });
                $("form").trigger('submit');
            });
        </script>
    </body>
</html>
